<!--首页搜索组件-->
<template>
  <div>
    <a-row class="searchDiv">
      <el-tabs tab-position="top" style="height: 170px">
        <el-tab-pane label="普通检索">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item class="coolinput">
              <div class="coolinput">
                <label for="input" class="text">种子关键词:</label>
                <input
                  type="text"
                  placeholder="输入种子关键词（注意：多个词用‘,’分隔）"
                  name="input"
                  class="input"
                  v-model="seed"
                />
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchBtn">查询</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="专业检索">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <div class="cool1input">
                <label for="input" class="text">种子关键词:</label>
                <input
                  type="text"
                  placeholder="输入种子关键词"
                  name="input"
                  class="input"
                  v-model="seed"
                />
              </div>
            </el-form-item>
            <el-form-item>
              <div class="cool1input">
                <label for="input" class="text">专业名词:</label>
                <input
                  type="text"
                  placeholder="输入专业词"
                  name="input"
                  class="input"
                  v-model="proper"
                />
              </div>
            </el-form-item>
            <el-form-item>
              <el-cascader
                class="stock"
                placeholder="从词库中选择"
                v-model="value1"
                :options="types"
                :props="props"
                @change="handleChange"
                :show-all-levels="false"
                style="margin-top: 30px"
              ></el-cascader>
            </el-form-item>
            <br>
            <el-button-group>
              <el-button class="btn" @click="searchBtn">快速</el-button>
              <el-button class="btn" @click="searchBtn">精准</el-button>
              <el-button class="btn" @click="searchBtn">个性</el-button>
            </el-button-group>
<!--            <el-button type="primary" @click="searchBtn">查询</el-button>-->

          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个性检索">
          <el-upload
            class="upload-demo"
            drag
            action="http://127.0.0.1:8000/api/images"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传png文件，且不超过500kb</div>
          </el-upload>
        </el-tab-pane>
      </el-tabs>
    </a-row>
    <br />
    <a-row :gutter="12">
      <a-col :span="12">
        <a-card title="自主建词" :bordered="false">
          <p>手动创建自己的词库</p>
          <a-button type="primary" @click="create = true">创建词库</a-button>
          <!--          创建词库对话框 -->
          <el-dialog v-model:model-value="create">
            <CreateWords></CreateWords>
          </el-dialog>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="专有词库" :bordered="false">
          <p>专有词库，点击查看</p>
          <a-button type="primary" @click="show">查看词库</a-button>
          <el-dialog v-model:model-value="view">
            <ViewWords :domain="domain"></ViewWords>
          </el-dialog>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import axios from 'axios';

  const route = useRouter();
  let result;
  const seed = ref();
  const proper = ref();
  const props = ref({ checkStrictly: true, multiple: true });
  const types = ref([
    {
      label: '个人专业名词库',
      children: [
        {
          value: '百度',
          label: '百度',
        },
        {
          value: '谷歌',
          label: '谷歌',
        },
        {
          value: '测试',
          label: '测试',
        },
      ],
    },
    {
      label: '公有专业名词库',
      children: [
        {
          value: '学生',
          label: '学生',
        },
      ],
    },
  ]);
  const create = ref(false);
  const view = ref(false);
  const domain = ref(null);
  const value = ref([]);
  const value1 = ref([]);
  const value2 = ref([]);
  const options = ref([
    {
      value: '选项1',
      label: '黄金糕',
    },
    {
      value: '选项2',
      label: '双皮奶',
      disabled: true,
    },
    {
      value: '选项3',
      label: '蚵仔煎',
    },
    {
      value: '选项4',
      label: '龙须面',
    },
    {
      value: '选项5',
      label: '北京烤鸭',
    },
  ]);

  // 监听选择的专有名词
  watch(value1, (newVal) => {
    let childValues = newVal.map((value) => value[value.length - 1]);
    value2.value = childValues;
  });

  const searchBtn = () => {
    let params = {};
    let words = [];
    if (proper.value != null) {
      words = proper.value.split(',');
    }
    let propers = words.concat(value2.value);
    params['new_words'] = seed.value;
    params['proper_words'] = propers;
    params['seg_ways'] = 0;
    console.log(params);
    axios({
      method: 'get',
      url: 'http://127.0.0.1:4523/m1/3571383-0-default/api/compkeys',
      params: params,
    })
      .then((res) => {
        console.log('请求成功');
        console.log(res);
        result = res.data;
        route.push({ name: 'ResultPage', params: {result:JSON.stringify(result) }});

      })
      .catch((error) => {
        console.log('请求失败');
        console.log('error');
      });
  };
  const handleChange = () => {
    console.log(value1.value);
  };

  //  // 搜索功能
  // const searchBtn = () => {
  //   let params = {};
  //   let words = [];
  //   if (proper.value != null) {
  //     words = proper.value.split(',');
  //   }
  //   let propers = words.concat(value2.value);
  //   params['seed_words'] = seed.value.split(',');
  //   params['proper_words'] = propers;
  //   params['seg_ways'] = 1;
  //   console.log(params);
  //   /**
  //    * 这里需要user_id
  //    */
  //   params['user_id'] = localStorage.getItem('user_id');
  //   console.log(params['user_id'])
  //   getCompKeyResult(
  //     params['user_id'],
  //     params['seed_words'],
  //     params['proper_words'],
  //     params['seg_ways']
  //   );
  //
  //   axios({
  //     method: 'get',
  //     url: 'ws://127.0.0.1:8000/ws/compkey/',
  //     params: params,
  //   })
  //     .then((res) => {
  //       console.log('请求成功');
  //       console.log(res);
  //       result = res.data;
  //       route.push({ name: 'ResultPage', params: { result: JSON.stringify(result) } });
  //     })
  //     .catch((error) => {
  //       console.log('请求失败');
  //       console.log('error');
  //       route.push({ name: 'ResultPage', params: { result: JSON.stringify(result) } });
  //     });
  // };
  // const handleChange = () => {
  //   console.log(value1.value);
  // };
  //
  // let socket = new WebSocket('ws://127.0.0.1:8000/ws/compkey/');
  //
  // const getCompKeyResult = (user_id, seed_words, proper_words, seg_ways) => {
  //   socket.send(
  //     JSON.stringify({
  //       user_id: user_id,
  //       seed_words: seed_words,
  //       proper_words: proper_words,
  //       seg_ways: seg_ways,
  //     })
  //   );
  //
  //   let data;
  //   socket.onmessage = (e) => {
  //     data = JSON.parse(e.data);
  //     console.log(data);
  //   };
  //
  //   return data;
  // };

  // 获取词库数据
  const show = () => {
    view.value = true;
    axios({
      method: 'get',
      url: 'http://127.0.0.1:4523/m1/3571383-0-default/api/properwords/public/all',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
    })
      .then((res) => {
        console.log('请求成功');
        console.log(res);
        let json = res.data.proper_words;
        let a = res.data.proper_words.map((obj) => obj.domain);
        // 获取domain类型
        let grouped = json.reduce((result, currentValue) => {
          (result[currentValue.domain] = result[currentValue.domain] || []).push(currentValue);
          return result;
        }, {});
        domain.value = grouped;
      })
      .catch((error) => {
        console.log('请求失败');
        console.log('error');
      });
  };
</script>

<style lang="scss" scoped>
  .searchDiv {
    //设置居中
    display: flex;
    margin-left: auto;
    margin-right: auto;
    height: 200px;
  }
  .coolinput {
    display: flex;
    flex-direction: column;
    width: fit-content;
    position: static;
    min-width: 500px;
    max-width: 500px;
  }

  .coolinput label.text {
    font-size: 0.75rem;
    color: #818cf8;
    font-weight: 700;
    position: relative;
    top: 0.5rem;
    margin: 0 0 0 7px;
    padding: 0 3px;
    background: #ffffff;
    width: fit-content;
  }

  .coolinput input[type='text'].input {
    padding: 11px 10px;
    font-size: 0.75rem;
    border: 2px #818cf8 solid;
    border-radius: 5px;
    background: #ffffff;
  }

  .coolinput input[type='text'].input:focus {
    outline: none;
  }
  .cool1input {
    display: flex;
    flex-direction: column;
    width: fit-content;
    position: static;
    max-width: 500px;
  }

  .cool1input label.text {
    font-size: 0.75rem;
    color: #818cf8;
    font-weight: 700;
    position: relative;
    top: 0.5rem;
    margin: 0 0 0 7px;
    padding: 0 3px;
    background: #ffffff;
    width: fit-content;
  }

  .cool1input input[type='text'].input {
    padding: 11px 10px;
    font-size: 0.75rem;
    border: 2px #818cf8 solid;
    border-radius: 5px;
    background: #ffffff;
  }

</style>
